<template>
  <!-- 人员类型新增 -->
  <el-dialog v-dialogDrag :title="dialogTitle" :close-on-click-modal="false" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form ref="form" :model="formData" label-width="80px" :rules="rules">
      <el-form-item label="类型名称" prop="typeName">
        <el-input v-model="formData.typeName" :readonly="isEdit" size="medium" placeholder />
      </el-form-item>
      <el-form-item label="类型编号" prop="typeNum">
        <el-input v-model="formData.typeNum" :readonly="isEdit" size="medium" placeholder="请输入类型编号" />
      </el-form-item>
      <el-form-item label="类型顺序" prop="orderNum">
        <el-input-number
          v-model="formData.orderNum"
          :disabled="isEdit"
          size="medium"
          style="width: 100%"
          controls-position="right"
          :min="1"
        />
      </el-form-item>
      <el-form-item label="拥有功能" prop="power">
        <el-checkbox-group v-model="formData.power">
          <el-checkbox label="describe">描述功能</el-checkbox>
          <el-checkbox label="allot">分配功能</el-checkbox>
          <el-checkbox label="patrol">巡检功能</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="" prop="remark">
        <label slot="label" v-html="`备&emsp;&emsp;注`" />
        <el-input v-model="formData.remark" :readonly="isEdit" :rows="3" type="textarea" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addPersonSupperType,
  detailPersonSupperType,
  editPersonSupperType,
  getMaxNum } from '@/api/superviseBaseInfo/typeManage/personnelType'
export default {
  name: 'DetailDialog',
  components: {},
  data() {
    const checkPower = (rule, value, callback) => {
      if (value.length) {
        callback()
      } else {
        callback(new Error('至少选择一个拥有功能!'))
      }
    }
    return {
      /* 新增 start */
      isEdit: false,
      btnDisabled: false,
      dialogTitle: '', // 对话框是否弹出显示
      dialogVisible: false, // 对话框是否弹出显示
      formData: {
        id: '',
        typeName: '', // 类型名称
        orderNum: 1, // 排序
        remark: '', // 备注
        power: [],
        typeNum: '',
        describe: '',
        allot: '',
        patrol: ''
      },
      // from表单校验
      rules: {
        typeNum: [{ required: true, message: '类型编号不能为空', trigger: 'blur' }],
        typeName: [{ required: true, message: '类型名称不能为空', trigger: 'blur' }],
        orderNum: [{ required: true, message: '类型排序不能为空', trigger: 'blur' }],
        power: [{ type: 'array', required: true, message: '至少选择一个拥有功能', validate: checkPower, trigger: 'change' }]
      }
      /* 新增 end */
    }
  },
  methods: {
    //
    handleAdd(title, id, isEdit) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.isEdit = isEdit
      if (id) {
        this.getDetailById(id)
      } else {
        // 获取最大排序
        this.getMaxNum()
      }
    },
    // 获取最大排序
    async getMaxNum() {
      const { data } = await getMaxNum()
      this.formData.orderNum = data
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailPersonSupperType(id)
      this.formData = { ...this.formData, ...data }
      const { allot, describe, patrol } = data
      if (allot === '0') this.formData.power.push('allot')
      if (describe === '0') this.formData.power.push('describe')
      if (patrol === '0') this.formData.power.push('patrol')
    },
    // 弹框取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
      this.formData.allot = ''
      this.formData.describe = ''
      this.formData.patrol = ''
      this.emptyForm()
    },
    // 保存
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.btnDisabled = true
          const { power } = this.formData
          this.formData.allot = power.includes('allot') ? 0 : 1
          this.formData.describe = power.includes('describe') ? 0 : 1
          this.formData.patrol = power.includes('patrol') ? 0 : 1
          if (this.formData.id) {
            // 修改
            await editPersonSupperType(this.formData)
            this.msgSuccess('修改成功')
          } else {
            // 新增
            await addPersonSupperType(this.formData)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 清空弹出
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
      this.isEdit = false
    }
  }
}
</script>

